const char* app_js = 
"let myip = '192.168.4.1';\n"
"\n"
"(function() {\n"
"    'use strict';\n"
"\n"
"    let files_tree_json = [];\n"
"\n"
"    const xhr = new XMLHttpRequest();\n"
"    xhr.responseType = \"json\";\n"
"\n"
"    xhr.addEventListener(\"load\", e => {\n"
"        if (xhr.status === 200) {\n"
"            filestree(xhr.response);\n"
"        }\n"
"    });\n"
"\n"
"    xhr.addEventListener(\"error\", e => {\n"
"        // alert(\"Cant connect, use template\");\n"
"        filestree(files_tree_json);\n"
"    });\n"
"\n"
"    xhr.onreadystatechange = function() { // Call a function when the state changes.\n"
"        if (this.readyState === XMLHttpRequest.DONE && this.status === 404) {\n"
"            // Request finished. Do processing here.\n"
"            filestree(files_tree_json);\n"
"        }\n"
"    }\n"
"\n"
"    let current_path = '';\n"
"\n"
"    function getfilestree(path)\n"
"    {\n"
"        current_path = path;\n"
"        console.log(path);\n"
"        xhr.open(\"GET\", path + '/', true);\n"
"        xhr.send();    \n"
"    }\n"
"\n"
"\n"
"    function filestree(json){\n"
"        let tree = document.getElementById(\"filestree\");\n"
"        let _path = document.getElementById(\"full_path\");\n"
"        _path.innerText = current_path;\n"
"        tree.innerHTML = \"<th>Name</th><th>Type</th><th>Size</th><th>Delete</th>\";\n"
"    \n"
"        console.log(json);\n"
"        let n = 0;\n"
"        json.forEach(element => {\n"
"            let tr = document.createElement(\"tr\");\n"
"            tr.className = 'filestree';\n"
"            let a = document.createElement(\"a\");\n"
"            if (element.dir !== '0') {\n"
"                a.href = '#';\n"
"                a.target = \"_self\";\n"
"                a.link = element.path;\n"
"                a.onclick = function (event) {\n"
"                    event.preventDefault();\n"
"                    getfilestree(element.path);\n"
"                };\n"
"            } else{\n"
"                a.href = element.path;\n"
"                a.target = \"_blank\";\n"
"            }\n"
"            a.text = element.name;\n"
"            let td1 = document.createElement(\"td\");\n"
"            td1.appendChild(a);\n"
"            let td2 = document.createElement(\"td\");\n"
"            td2.innerHTML = element.dir?\"directory\":\"file\";\n"
"            let td3 = document.createElement(\"td\");\n"
"            td3.innerHTML = element.size;\n"
"            td1.className = 'filestree';\n"
"            td2.className = 'filestree1';\n"
"            td3.className = 'filestree1';\n"
"\n"
"            tr.appendChild(td1);\n"
"            tr.appendChild(td2);\n"
"            tr.appendChild(td3);\n"
"            \n"
"\n"
"            let btnDel = document.createElement(\"button\");\n"
"            btnDel.path = element.path;\n"
"            btnDel.className = 'button black';\n"
"            if (n > 0) {                \n"
"                btnDel.innerText = \"delete\";\n"
"                btnDel.addEventListener('click', () => {\n"
"                    const http = new XMLHttpRequest();\n"
"                    var params = 'file=' + element.path;\n"
"                    var url = '/delete';\n"
"                    http.open(\"POST\", url, true);\n"
"                    // Send the proper header information along with the request\n"
"                    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');\n"
"                \n"
"                    http.onreadystatechange = function() {//Call a function when the state changes.\n"
"                        if(http.readyState == 4 && http.status == 201) {\n"
"                            console.log('element deleted', http.responseText);\n"
"                            getfilestree(current_path);\n"
"                        } else if (http.readyState == 4 && http.status == 409) {\n"
"                            console.log('cant delete', element.path);\n"
"                        }\n"
"                    }\n"
"                    http.send(params);\n"
"                });\n"
"            } else {\n"
"                btnDel.innerText = \"mkdir\";\n"
"                btnDel.addEventListener('click', () => {\n"
"                    let dirname = prompt(\"New directory name\");\n"
"                    if(dirname == null || dirname == \"\") return;\n"
"                    const http = new XMLHttpRequest();\n"
"                    let sub;\n"
"                    if (element.path.substring(element.path.length - 3, element.path.length) === '/..') {\n"
"                        sub = element.path.substring(0, element.path.length - 2);\n"
"                    } else {\n"
"                        sub = element.path + '/';\n"
"                    }\n"
"                    var params = 'dirname=' + sub + dirname;\n"
"                    console.log(params);\n"
"                    var url = '/mkdir';\n"
"                    http.open(\"POST\", url, true);\n"
"                    // Send the proper header information along with the request\n"
"                    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');\n"
"                \n"
"                    http.onreadystatechange = function() {//Call a function when the state changes.\n"
"                        if(http.readyState == 4 && http.status == 201) {\n"
"                            console.log('directory created', http.responseText);\n"
"                            getfilestree(current_path);\n"
"                        } else if (http.readyState == 4 && http.status == 409) {\n"
"                            alert('directory already exist');\n"
"                        }\n"
"                    }\n"
"                    http.send(params);\n"
"                });\n"
"            }\n"
"\n"
"            let td4 = document.createElement(\"td\");\n"
"            td4.appendChild(btnDel);\n"
"            td4.className = 'filestree1';\n"
"            tr.appendChild(td4);\n"
"\n"
"            tree.appendChild(tr);\n"
"            n++;\n"
"        });\n"
"    }\n"
"    \n"
"    function postwifiap(path, ssid, pass, ap, auth)\n"
"    {\n"
"        const http = new XMLHttpRequest();\n"
"    \n"
"        console.log(path);\n"
"        var params = 'ssid=' + ssid + '&pass=' + pass + '&ap=' + ap + '&auth=' + auth;\n"
"        var url = '/wifi';\n"
"        http.open(\"POST\", url, true);\n"
"        // Send the proper header information along with the request\n"
"        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');\n"
"    \n"
"        http.onreadystatechange = function() {//Call a function when the state changes.\n"
"            if(http.readyState == 4 && http.status == 200) {\n"
"                console.log('credentials set', http.responseText);\n"
"            }\n"
"        }\n"
"        http.send(params);\n"
"    }\n"
"    \n"
"    function postsettings(freq, bw, sf, cr)\n"
"    {\n"
"        const http = new XMLHttpRequest();\n"
"    \n"
"        var params = 'freq=' + freq + '&bw=' + bw + '&sf=' + sf + '&cr=' + cr;\n"
"        var url = '/settings';\n"
"        http.open(\"POST\", url, true);\n"
"        // Send the proper header information along with the request\n"
"        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');\n"
"    \n"
"        http.onreadystatechange = function() {//Call a function when the state changes.\n"
"            if(http.readyState == 4 && http.status == 200) {\n"
"                console.log('settings set', http.responseText);\n"
"            }\n"
"        }\n"
"        http.send(params);\n"
"    }\n"
"    \n"
"    document.addEventListener('DOMContentLoaded', event => {\n"
"\n"
"        getfilestree('/files');\n"
"\n"
"        let stabtn = document.getElementById(\"sta_btn\");\n"
"        let apbtn = document.getElementById(\"ap_btn\");\n"
"        let enable_ap = document.getElementById(\"en_ap\");\n"
"        let enable_sta = document.getElementById(\"en_sta\");\n"
"        let settingsSend = document.getElementById(\"settingsSend\");\n"
"\n"
"        // Get the modal\n"
"        let modalstats = document.getElementById(\"myModal\");\n"
"        let modalwifi = document.getElementById(\"myModal1\");\n"
"        let modaltree = document.getElementById(\"myModal2\");\n"
"        let spinner = document.getElementById(\"spinner\");\n"
"        let settingsForm = document.getElementById(\"settingsForm\");\n"
"        \n"
"        // Get the button that opens the modal\n"
"        let settingsBtn = document.getElementById(\"settingsBtn\");\n"
"        let btnwifi = document.getElementById(\"wifi\");\n"
"        let btntree = document.getElementById(\"tree\");\n"
"        let btnformat = document.getElementById(\"format\");\n"
"        let btnmkdir = document.getElementById(\"mkdir\");\n"
"\n"
"        // Settings fields\n"
"        let FREQ = document.querySelector(\"#freq1\");\n"
"        let BW = document.querySelector(\"#bw1\");\n"
"        let SF = document.querySelector(\"#sf1\");\n"
"        let CR = document.querySelector(\"#cr1\");\n"
"\n"
"        try {\n"
"            FREQ.value = init_freq;\n"
"            BW.value = init_bw;\n"
"            SF.value = init_sf;\n"
"            CR.value = init_cr;           \n"
"        } catch (error) {}\n"
"/*\n"
"        btnformat.onclick = function() {\n"
"            if(confirm(\"Do you want to format SD crad?\nIt will takes about 5 minutes!!!\")){\n"
"                spinner.display = 'block';\n"
"                const http = new XMLHttpRequest();\n"
"                var url = '/format';\n"
"                http.open(\"POST\", url, true);\n"
"            \n"
"                http.onreadystatechange = function() {//Call a function when the state changes.\n"
"                    if(http.readyState == 4 && http.status == 200) {\n"
"                        console.log('sd card formatted', http.responseText);\n"
"                        spinner.display = 'none';\n"
"                    }\n"
"                }\n"
"                http.send();\n"
"            }\n"
"        }\n"
"*/\n"
"        let _btnmkdir = function() {\n"
"        // btnmkdir.onclick = function() {\n"
"            let dirname = prompt(\"New directory name\");\n"
"            if(dirname == null || dirname == \"\") return;\n"
"            const http = new XMLHttpRequest();\n"
"            var params = 'dirname=' + dirname;\n"
"            var url = '/mkdir';\n"
"            http.open(\"POST\", url, true);\n"
"            // Send the proper header information along with the request\n"
"            http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');\n"
"        \n"
"            http.onreadystatechange = function() {//Call a function when the state changes.\n"
"                if(http.readyState == 4 && http.status == 201) {\n"
"                    console.log('directory created', http.responseText);\n"
"                    getfilestree(current_path);\n"
"                } else if (http.readyState == 4 && http.status == 409) {\n"
"                    console.log('directory already exist', http.responseText);\n"
"                    alert('directory already exist');\n"
"                }\n"
"            }\n"
"            http.send(params);\n"
"        }\n"
"\n"
"        btnwifi.onclick = function() {\n"
"            modalwifi.style.display = \"block\";\n"
"        }\n"
"        btntree.onclick = function() {\n"
"            modaltree.style.display = \"block\";\n"
"        }\n"
"        enable_ap.onclick = function(ev) {\n"
"            console.log('AP', ev);\n"
"            let content = document.getElementById(\"ap_content\");\n"
"            if(ev.target.checked) content.style.display = \"block\";\n"
"            else content.style.display = \"none\";\n"
"        }\n"
"        enable_sta.onclick = function(ev) {\n"
"            let content = document.getElementById(\"sta_content\");\n"
"            if(ev.target.checked) content.style.display = \"block\";\n"
"            else content.style.display = \"none\";\n"
"        }\n"
"        // Get the <span> element that closes the modal\n"
"        // let span1 = document.getElementsByClassName(\"close1\")[0];\n"
"        let span2 = document.getElementById(\"close2\");\n"
"        let span3 = document.getElementById(\"close3\");\n"
"        let span4 = document.getElementById(\"close4\");\n"
"        \n"
"        // When the user clicks on <span> (x), close the modal\n"
"        // span1.onclick = function() {\n"
"        //     modalstats.style.display = \"none\";\n"
"        // }\n"
"        span2.onclick = function() {\n"
"            modalwifi.style.display = \"none\";\n"
"        }\n"
"        // span3.onclick = function() {\n"
"        //     modaltree.style.display = \"none\";\n"
"        // }\n"
"        \n"
"        // When the user clicks anywhere outside of the modal, close it\n"
"        window.onclick = function(event) {\n"
"            if (event.target == modalstats) {\n"
"                modalstats.style.display = \"none\";\n"
"            }\n"
"            if (event.target == modalwifi) {\n"
"                modalwifi.style.display = \"none\";\n"
"            }\n"
"            if (event.target == modaltree) {\n"
"                modaltree.style.display = \"none\";\n"
"            }\n"
"            if (event.target == settingsForm) {\n"
"                settingsForm.style.display = \"none\";\n"
"            }\n"
"        }\n"
"\n"
"        stabtn.addEventListener('click', function() {\n"
"            const ssid = document.querySelector(\"#sta_ssid\").value;\n"
"            const pass = document.querySelector(\"#sta_pass\").value;\n"
"            postwifiap('', ssid, pass, 0, 0);\n"
"        });\n"
"\n"
"        apbtn.addEventListener('click', function() {\n"
"            const ssid = document.querySelector(\"#ap_ssid\").value;\n"
"            const pass = document.querySelector(\"#ap_pass\").value;\n"
"            var auth = document.getElementById(\"auth\");\n"
"            postwifiap('', ssid, pass, 1, auth.value);\n"
"        });\n"
"\n"
"    });\n"
"\n"
"})();\n";
